<template>
    <div id="wrapper">
    <select id="sel_val">
        <option value="node" select='select'>node</option>
        <option value="electron">electron</option>
    </select>
    <input type="text" id="txt_val">
    <button @click="getAbis" style="text-align: center;margin: 10px auto;"> GetABI</button>
    <button @click="getTargets" style="text-align: center;margin: 10px auto;"> GetTarget</button>
    <div>
        ABI:<span id="span_abi_val"></span>
        TARGET:<span id="span_target_val"></span>
    </div>
    <div id="error" style="color:red"></div>
    </div>
</template>

<script>
    const nodeAbi = require('node-abi');


    export default {
        name: 'landing-page',
        data (){
            return {

            }
        },
        methods: {
            getAbis(){
                const error = document.getElementById('error');
                const sel = document.getElementById('sel_val');
                const txt = document.getElementById("txt_val");
                try{
                    error.innerHTML = '';
                    let val = nodeAbi.getAbi(txt.value, sel.value);
                    document.getElementById('span_abi_val').innerText = val;
                }
                catch(ex){
                    error.innerText = ex.message
                }
            },
            getTargets(){
                const error = document.getElementById('error');
                const sel = document.getElementById('sel_val');
                const txt = document.getElementById("txt_val");
                try{
                    error.innerHTML = '';
                    let val = nodeAbi.getTarget(txt.value, sel.value)
                    document.getElementById('span_target_val').innerText = val;
                }
                catch(ex){
                    error.innerText = ex.message
                }
            }
        }
    }

</script>
